<script setup>
import {useRouter,useRoute} from 'vue-router'
import { onBeforeMount } from "vue"
import CatalogService from "../stores/CatalogService";


//跳转至category下的products页面，参数为 categoryId
// const toCatalog = (id) =>{
//   router.push({
//     path:'/catalog',
//     state: {id: id}
//   })
// }

  
onBeforeMount(() =>{
  // getCategories()
})

const router = useRouter()
let categories = ref([])

//跳转至category下的products页面，参数为 categoryId
const toProducts = (cid) =>{
  router.push({
    path:'/catalog/product',
    state: {categoryId: cid}
  })
}

const toProduct = ( (cid)=>{
    router.push({
    name:'product',
    params: {
      categoryId:cid
    },
  })
})

onBeforeMount(() =>{
  // getCategories()
})
</script>

<template>
  <Top/>
  <div id="Main">
    <div id="SidebarContent">
      <div style="color: deepskyblue" @click="toProduct(`FISH`)">
        Fish
      </div>
      Saltwater, Freshwater
      <div style="color: deepskyblue" @click="toProduct(`DOGS`)">
        Dogs
      </div>
      Various Breeds
      <div style="color: deepskyblue" @click="toProduct(`CATS`)">
        Cats
      </div>
      Various Breeds<br>Exotic Varieties
      <div style="color: deepskyblue" @click="toProduct(`REPTILES`)">
        Reptiles
      </div>

      <div id="MainImageContent">
        <map name="estoremap">
          <area class="main" alt="Birds" coords="72,2,280,250"
           shape="RECT" data-itemId="BIRDS" data-pos="1" @click="toProduct('BIRDS')"/>
          <area class="main" alt="Fish" coords="2,180,72,250"
           shape="RECT" data-itemId="FISH" data-pos="2"  @click="toProduct('FISH')"/>
          <area class="main" alt="Dogs" coords="60,250,130,320"
           shape="RECT" data-itemId="DOGS" data-pos="3" @click="toProduct('DOGS')"/>
          <area class="main" alt="Reptiles" coords="140,270,210,340"
          shape="RECT" data-itemId="REPTILES" data-pos="4" @click="toProduct('REPTILES')"/>
          <area class="main" alt="Cats" coords="225,240,295,310"
          shape="RECT" data-itemId="CATS" data-pos="5" @click="toProduct('CATS')"/>
          <area class="main" alt="Birds" coords="280,180,350,250"
            shape="RECT" data-itemId="BIRDS" data-pos="6" @click="toProduct('BIRDS')"/>
        </map>
        <img height="355" src="/static/img/splash.gif"
             usemap="#estoremap" width="350" />
      </div>
      Exotic Varieties
    </div>
  </div>
    <Bottom/>
  </template>
  <style scoped>
  #Main{
    /*border: solid red;*/
    padding: 10px;
    width: 90vw;
    height: 75vh;
  }
  #SidebarContent{
    position: relative;
    float: left;
    /*border: solid red;*/
    width: 15%;
    left: 2%;
    top: 10%;
  }
  #MainImageContent{
    position: relative;
    /*border: solid red;*/
    width: 50%;
    top: 10%;
    left: 25%;
  }
  </style>

